<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4" :xs="24">
        <el-aside>
          <el-input
            v-model="filterText"
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
            clearable
            size="mini"
          />
          <el-tree
            ref="tree"
            :data="treeData"
            class="filter-tree"
            :props="defaultProps"
            :highlight-current="true"
            node-key="id"
            :current-node-key="defaultTree"
            :default-expanded-keys="defaultExpanded"
            :filter-node-method="filterNode"
            @current-change="getNowTree"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <img
                  v-if="data.Seniority == 2"
                  src="@/assets/device/deviceDd.png"
                />
                <img
                  v-if="data.Seniority == 3"
                  src="@/assets/device/deviceInfo.png"
                />
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </el-aside>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="rightMain">
          <!--  <navbar :children="true"  />-->
          <warningCountChild
            v-if="isShow"
            :chose-data="choseTreeItem"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import warningCountChild from './components/content.vue'


import { stationAllList1 } from '@/api/fileManage.js'

export default {
  name: 'index',
  components: {
    warningCountChild,

  },

  data() {
    return {
      treeData: [], // 树形结构数据
      defaultExpanded: [],
      defaultTree: null,
      cardName: {
        typeDelimit: '类型定义配置',
        deviceFile: '档案配置',
      },
      choseTreeItem: {
        id: null,
        name: null,
      },
      isShow: false,
      height: '0px',
      filterText: '',
      defaultProps: {
        children: 'child',
        label: 'name',
        isLeaf: 'leaf',
      },
    }
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.getTreeData()
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    getHeight() {
      this.height = window.getComputedStyle(
        document.querySelector('.app-main')
      ).height
      this.height = parseInt(this.height) + 'px'
    },
    filterNode(value, data) {
      console.log(value, data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getNowTree(a, b) {

      this.choseTreeItem = arguments[0]
    },
    getTreeData() {
      stationAllList1().then((res) => {
        this.treeData = res.data.data
        // 默认展开第一个节点数据
        if (this.treeData.length > 0) {
          // 有第一级数据
          this.defaultExpanded[0] = this.treeData[0].id
          this.defaultTree = this.treeData[0].id
          // if (this.treeData.length > 0) {
          this.choseTreeItem = this.treeData[0]
          console.log('choseTreeItem', this.choseTreeItem)
          this.isShow = true
          // }
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.defaultTree)
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-container {
  min-height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.box {
  position: relative;
  box-sizing: border-box;

  .nav {
    position: absolute;
    top: 0px;
    left: calc(12.8% + 19px);
    width: 85%;
    box-sizing: border-box;
    z-index: 1999;
  }
}

.el-aside {
  width: 100% !important;
  height: 100% !important;
}

.el-tree {
  background-color: transparent;
  margin-top: 10px;
}

.rightMain {
  width: 100%;
  height: 100%;
  background-color: #fff;
  /*margin-top: 50px;*/
  box-sizing: border-box;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
